import React from 'react';
import {Button, message} from 'antd';
import objectAssign from 'object-assign';
import { WeaTools, WeaErrorPage, WeaFormItem, WeaSelect } from 'ecCom';
import EChartList from './EchartList';
class EchartTemplate extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            datas: [],
        }
        this.onSetDatas = this.onSetDatas.bind(this);
        this.onEdit = this.onEdit.bind(this);
    }
    componentWillMount(){
        WeaTools.callApi('/api/portal/hpEcharts/datas', 'POST', {}).then(result=> {
            this.setState(result);
        });
    }
    onSetDatas(type, item){
        let datas = [...this.state.datas];
        if(type == "add"){
            datas.push(item);
        }else if(type == "update"){
            datas.filter((obj, index, arr)=>{
                if(obj.id == item.id){
                    datas.splice(index,1,objectAssign({}, obj, item));
                    return true;
                }
                return false;
            });
        }
        this.setState({datas});
    }
    onEdit(){
        this.refs.EChartList.setState({visible: true});
    }
	render(){
		const { onChange, value, sysDatas } = this.props;
        const { id, datas } = this.state;
		return (<div className="portal-esetting-reportform-template">
                <EChartList ecId={`${this && this.props && this.props.ecId || ''}_EChartList@vifzbb`} ref="EChartList" sysDatas={sysDatas} datas={datas} onChangeDatas={this.onSetDatas}/>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@cwdvi3`}
                    options={sysDatas.map((item, i) => {
                        return {key: item.key, selected: false, showname: item.value}
                    })}
                    value={value}
                    // style={{width: '200px'}}
                    onChange={value=>onChange(value)}
                />
                {/*<i className="icon-coms-reportform" title="图表库" onClick={this.onEdit}/>*/}
            </div>)
	}
}

export default EchartTemplate;